<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>KonvaJS Sandbox</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
      body {
        margin: 0;
        width: 100vw;
        height: 100vh;
      }
    </style>
    <!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
    <script>
      // TouchEmulator();
    </script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.js"></script> -->
    <!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
    <!-- <script src="./hammer.js"></script> -->
    <!-- <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.js"></script> -->
  </head>

  <body>
    <div id="container"></div>

    <script type="module">
      import Konva from '../src/index.ts';

      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerHeight,
        height: window.innerHeight,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      const circle = new Konva.Circle({
        x: 100,
        y: 150,
        radius: 50,
        draggable: true,
        fillLinearGradientStartPoint: { x: -50, y: -50 },
        fillLinearGradientEndPoint: { x: 50, y: 50 },
        fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
      });

      layer.add(circle);

      const tr = new Konva.Transformer({
        nodes: [circle],
        flipEnabled: false,
      });
      layer.add(tr);

      const dot = new Konva.Circle({
        x: 100,
        y: 100,
        radius: 2,
        fill: 'blue',
      });

      layer.add(dot);

      circle.on('transform', () => {
        dot.x(circle.x());
        dot.y(circle.y() - circle.radius() * circle.scaleY() - 50);
      });
    </script>
  </body>
</html>
